<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"//>	
		<link rel="stylesheet" type="text/css" href="../../css/app.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/appOther.css"/>
		<style type="text/css">
			.mui-pull-left{
    			color: #FFFFFF;	
	    		line-height:44px ;
	    	}
	    	.mui-pull-right{
	    		color: #FFFFFF;	
	    		line-height:44px ;
	    		
	    	}
	    	.mui-title{
	    		color: #FFFFFF;
	    	}
	    	.mui-icon.iconfont{
	    		font-size: 18px;
	    	}
	    	nav .mui-icon{
	    		left:50%;
	    		margin-left: -12px;
	    	}
	    	.mui-bar.mui-bar-nav{
	    		background: #0072dc;
	    	}
	    	
	    	.mui-control-item.text_submain{
	    		line-height: 32px;
	    	}
	    	.topic_content img{
	    		width: auto !important;
	    		height: auto !important;
	    		max-width: 100%;
	    	}
		</style>
	</head>

	<body id='app'>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-pull-left">
				<i class="mui-icon iconfont">&#xe62f;</i> 
				<span class="text_submain" style="vertical-align: 2px;">返回</span>
			</a>		
			<h1 class="mui-title" id="title">{{userInfo.Name}}</h1>
			<a @tap='goMsg' class="mui-pull-right">
			<i class="mui-icon iconfont icon-mymessage"></i>
			</a>
		</header>
		<div class="mui-content">
			<div class="circle-header mui-table-view-cell bg_white">
				<img :src="userInfo.Avatar" class="mui-pull-left circle-img" id="circleImg" style="margin-left: 10px;">
				<p class="text_main label-title"><span id="circleName">{{userInfo.Sign}}</span></p>						
				<p class="text_subnote">
					<span>获赞: <span id="upNum">{{userInfo.UpCount}}</span></span>&nbsp;&nbsp;&nbsp;&nbsp;
					<span>圈子: <span id="circleNum">{{userInfo.CircleCount}}</span></span>
				</p>
				<div @tap="follow" class="mui-btn mui-btn-primary btn-follow-rec" style="margin-right: 10px;" id="followStatus">{{followText}}</div>
			</div>
		    <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#trends">
						ta的动态
					</a>
					<a class="mui-control-item" href="#heFollows">
						ta关注的
					</a>
					<a class="mui-control-item" href="#followHes">
						关注ta的
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
				<div class="mui-slider-group" style="height: 600px;">
					<div id="trends" class="mui-slider-item mui-control-content mui-active">
						<div id='wrapperTrends' style="min-height: 300px;" class="mui-scroll-wrapper">
							<div id='scrollTrends' style="min-height: 300px;" class="mui-scroll" data-type='trends'>
								<ul class="mui-table-view app-hide">
									<li @tap="goTrend(trend.Target, trend.TargetID)" v-for="trend in trends" class="mui-table-view-cell">
										<i class="mui-pull-left mui-icon iconfont i_label_little" style="color: #666666;line-height: 25px;margin-right: 5px;">&#xe61c;</i>
										<p>
											<span class="text_main card_username">{{trend.Name}}</span>
											<span class="text_main">{{trend.Hint}}</span>
										</p>
										<p class="card_title text_main">{{trend.Title}}</p>
										<div>
											<p v-if="trend.objType==='topic'" class="card_content_attr text_submain">
												<span class="mui-badge-number ">{{trend.CommentsNumber}}</span>
												<span>{{trend.Content}}</span>
											</p>
											<img v-if="trend.objType==='circle'" :src="trend.CircleImg" style="background: #000000;width: 60px;height: 60px;margin-top: 20px;" />
											<p class="text_note">
												<span class="card_note-fl">来自：{{trend.CircleName}}</span>
												<span class="card_note-fr">{{trend.Datetime}}</span>
											</p>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="heFollows" class="mui-slider-item mui-control-content">
						<div id='wrapperHeFollows' style="min-height: 300px;" class="mui-scroll-wrapper">
							<div id='scrollHeFollows' style="min-height: 300px;" class="mui-scroll" data-type='heFollows'>
								<ul class="mui-table-view app-hide">
									<li @tap='goMember(member.ID, member.Name)' v-for="member in heFollows" class="mui-table-view-cell">
										<i class="mui-pull-left mui-icon iconfont i_label"  style="color: #666666;"><img :src="member.Avatar" alt=""  style="border-radius: 50%;width: 20px;height: auto;"></i>
										<p>
											<span class="text_subtitle label-title">{{member.Name}}</span>
										</p>	
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="followHes" class="mui-slider-item mui-control-content">
						<div id='wrapperFollowHes' style="min-height: 300px;" class="mui-scroll-wrapper">
							<div id='scrollFollowHes' style="min-height: 300px;" class="mui-scroll" data-type='followHes'>
								<ul class="mui-table-view app-hide">
									<li @tap='goMember(member.ID, member.Name)' v-for="member in followHes" class="mui-table-view-cell">
										<i class="mui-pull-left mui-icon iconfont i_label"  style="color: #666666;"><img :src="member.Avatar" alt=""  style="border-radius: 50%;width: 20px;height: auto;"></i>
										<p>
											<span class="text_subtitle label-title">{{member.Name}}</span>
										</p>	
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="UTF-8">
				var vm=new Vue({
					el:'#app',
					data: {
						uid:'',
						userInfo:{Name:''},
						trends:[],
						heFollows:[],
						followHes:[],
						scrollTrend:{},
						scrollHeFollow:{},
						scrollFollowHe:{},
						paramObj:{
							PageSize:6,
							CurPageTrend:1,
							CurPageHeFollow:1,
							CurPageFollowHe:1,
						}
					},
					computed:{
						followText:function () {
							var resultText = '';
							if(this.userInfo.followStatus == 0){
								resultText = '关注';
							}else if(this.userInfo.followStatus==1){
								resultText = '不关注';
							}
							return resultText;
						}
					},
					ready:function () {
						var me = this;
						$('#app .app-hide').show();
						mui.init();
//						ui.fixScroll(0);
						me.scrollTrend=ui.setPullToRefresh('#wrapperTrends','#scrollTrends',this.getTrends);
						me.scrollHeFollow=ui.setPullToRefresh('#wrapperHeFollows','#scrollHeFollows',this.getHeFollows);
						me.scrollFollowHe=ui.setPullToRefresh('#wrapperFollowHes','#scrollFollowHes',this.getFollowHes);
						mui.plusReady(function () {
								me.getUserInfo();
								me.getTrends(true);
								me.getHeFollows(true);
								me.getFollowHes(true);
						});
						document.addEventListener('reloadTrends',function () {
							me.getTrends(true);
						},false);
						document.addEventListener('reloadHeFollows',function () {
							me.getHeFollows(true);
						},false);
						document.addEventListener('reloadFollowHes',function () {
							me.getFollowHes(true);
						},false);
					},
					methods:{
						getUserInfo:function(){
							var me = this;
							var current = plus.webview.currentWebview();
							me.uid = current.uid;
							me.userInfo.Name= current.uname;
							ajax.post(api.user.getOtherUserInfo,{uid: me.uid},function (data) {
								me.userInfo = data.Data;
							},false,function (data) {
								showPage(current);
							});
						},
						goMsg:function(){
							var me = this;
							openPage('../mycenter/chat.html','chat',{uid:me.uid, uname:me.userInfo.Name, uimg: me.userInfo.Avatar});
						},
						goTrend: function(target, targetID){
							if(target==='circle'){
								openPage('../circle/circle.html','circle',{cid: targetID});
							}else if(target === 'question'){
								openPage('../circle/circle.html','question',{qid:targetID});
							}
						},
						goMember:function(mid, mname){
							if(!mid){
								alert('mid 为空，无法跳转！');
								return;
							}
							openPage('../circle/otherCenter.html','otherCenter_'+mid,{uid:uid, uname:mname})
						},
						follow: function(){
							var me = this;
							if(me.userInfo.followStatus == 0){
								ajax.post(api.user.followOther,{ID: me.uid},function () {
									me.userInfo.followStatus=1;
								})
							}else if(me.userInfo.followStatus==1){
								mui.confirm("确定要取消关注吗？","学园",["确定","取消"],function (e) {
									if(e.index === 0){
										ajax.post(api.user.unFollowOther,{ID: me.uid},function () {
											me.userInfo.followStatus=0;
										})
									}
								});
							}
						},
						getTrends:function(isRefresh){
							var me = this;
							var nomore = false;
							me.paramObj.CurPageTrend = isRefresh?1:me.paramObj.CurPageTrend+1;
							ajax.post(api.user.getOtherTrends,{
								ID: me.uid,
								PageSize:me.paramObj.PageSize,
								CurPage: me.paramObj.CurPageTrend,
							},function (data) {
								me.trends = isRefresh?data.Data:me.trends.concat(data.Data);
								nomore=data.Data.length<me.paramObj.PageSize;
							},false, function (data) {
								ui.clearScrollAnimal(me.scrollTrend.puller, isRefresh, nomore);
							});
						},
						getHeFollows: function (isRefresh) {
							var me = this;
							var nomore = false;
							me.paramObj.CurPageHeFollow = isRefresh?1:me.paramObj.CurPageHeFollow+1;
							ajax.post(api.user.getOtherFollows,{
								ID: me.uid,
								PageSize:me.paramObj.PageSize,
								CurPage: me.paramObj.CurPageHeFollow,
							},function (data) {
								me.heFollows = isRefresh?data.Data:me.heFollows.concat(data.Data);
								nomore=data.Data.length<me.paramObj.PageSize;
							},false, function (data) {
								ui.clearScrollAnimal(me.scrollHeFollow.puller, isRefresh, nomore);
							});
						},
						getFollowHes: function (isRefresh) {
							var me = this;
							var nomore = false;
							me.paramObj.CurPageFollowHe = isRefresh?1:me.paramObj.CurPageFollowHe+1;
							ajax.post(api.user.getFollowOthers,{
								ID: me.uid,
								PageSize:me.paramObj.PageSize,
								CurPage: me.paramObj.CurPageFollowHe,
							},function (data) {
								me.followHes = isRefresh?data.Data:me.followHes.concat(data.Data);
								nomore=data.Data.length<me.paramObj.PageSize;
							},false, function (data) {
								ui.clearScrollAnimal(me.scrollFollowHe.puller, isRefresh, nomore);
							});
						},
					}
				})
		</script>	
	</body>

</html>